<template>
	<s-layout title="会员" navbar="inner1" color='#333333'
		onShareAppMessage>
		<view class="content">
			<assNavbar title="会员" :background="{
				img:sheep.$url.cdn('/storage/giveaway/20250314/2ddcedf3c1a5d0fac0c300e6073840c7.png'),
				BGcolor:'transparent'
			}"/>
			<image class="bgTop" :src="sheep.$url.cdn('/storage/giveaway/20250314/2ddcedf3c1a5d0fac0c300e6073840c7.png')" mode="widthFix" />
			<su-tabs  :list="tabMapsTop" lineColor="#003288" :activeStyle="{color:'#003288'}" 
				lineHeight="3" lineWidth="28" :scrollable="false" @change="onTabsChangeTop" 
				:current="state.current"></su-tabs>
			<swiper  :style="{height:pageHeight + 'px'}"  @change="swiperChange" :current="state.current" 
				>
				<swiper-item class="swiper-item" v-for="item in levelList" :key="item.id">
					<scroll-view class="scroll-view" scroll-y :style="{height:`calc(${pageHeight}px - 150rpx)`}">
						<view class="card">
							<view class="cardBox">
								<image class="cardBox-bg" :src="sheep.$url.cdn(item.pic1)" mode="widthFix" />
								<view class="info-time" :style="`color:${item?.timeColor}`"  v-show="false">
									2025.06.01到期
									<view class="repair">
										2025.01.01 可补差价升级
									</view>
								</view>
							</view>
						</view>
						<image class="infoCard" :src="sheep.$url.cdn(item.pic2)" mode="widthFix" />
					</scroll-view>
					
				</swiper-item>
			</swiper>
		</view>
		
		<su-fixed bottom>
			<view class="ss-p-x-20 ss-p-b-60 ss-flex justify-between">
				<button disabled class="ss-reset-button btn" @click='btnClick(item)'>
						立即开通
					</button>
			</view>
		</su-fixed>
	</s-layout>
</template>

<script setup>
	import sheep from '@/sheep';
	import assNavbar from "@/components/ass-navbar.vue"
	import {ref ,reactive, computed, onBeforeMount,nextTick } from 'vue'
	import { onLoad, onShow, onHide } from '@dcloudio/uni-app';
	const sys_navBar = sheep.$platform.navbar;//标题栏高度
 	const template = computed(() => sheep.$store('app').template?.home);
	const tabMapsTop = ref([{id:1,name:'白银会员'},{id:2,name: '黄金会员'}]);
	const state = reactive({
		current:0,
		
	})
 	const levelList=[
		{pic1:'/storage/service/20250315/0d9f7677968f654cf98f4d3981a0b63b.png',pic2:'/storage/service/20250315/0ad7d4fef7d378cafdcbe58f25ef4652.png'},
		{pic1:'/storage/service/20250315/948669258e41b1224753c79d0968ced8.png',pic2:'/storage/service/20250315/0ad7d4fef7d378cafdcbe58f25ef4652.png'},
	]
	let pageHeight = computed(()=>(sheep.$platform.device.safeArea.height  - 44 - 44))
	onLoad((opt)=>{
		
	})
	onShow(()=>{
		// makerStatus()
	})
	function swiperChange(e){
		state.current = e.detail.current
	}
	
	
	
	
	function onTabsChangeTop(e){
		state.current = e.index
	
	}

	
	
	
</script>

<style lang="scss" scoped>
	.bgTop{
		width:100%;
		height:331rpx;
		margin-top:v-bind('-sys_navBar+"px"');
		margin-bottom:-200rpx
	}
	.btn{
		width: 702rpx;
		height: 80rpx;
		background: #003288;
		border-radius: 49rpx;
		font-size: 32rpx;
		color: #FFFFFF;
	}
	.btn[disabled]{
		background:rgba(115, 121, 136, 0.4)!important;
	}
	::v-deep{
		.u-tabs{
			background: transparent !important;
			border-bottom: none !important;
		}
		.uni-forms-item__inner{
			padding-bottom: 16rpx;
			.uni-forms-item__content{
				display: flex;
				align-items: center;
			}
		}
		.uni-forms-item--border{
			padding: 10rpx 0 10rpx !important;
		}
	}
	.pop{
		position: relative;
		height: 900rpx;
		.pop-title{
			height: 88rpx;
			font-family: 思源黑体;
			font-size: 32rpx;
			font-weight: 500;
			line-height: 88rpx;
			text-align: center;
			letter-spacing: 0px;
			color: #2C3130;
		}
		.pop-tips{
			image{
				width: 30rpx;
				height: 24rpx;
				margin-right: 12rpx;
			}
			box-sizing: border-box;
			width: 750rpx;
			height: 64rpx;
			background: #F3F4F8;
			font-family: 思源黑体;
			font-size: 24rpx;
			font-weight: normal;
			line-height: 64rpx;
			letter-spacing: 0px;
			color: #656772;
			padding: 0 24rpx;
		}
		
		.pop-form{
			padding: 0 24rpx;
		}
		.pop-btn{
			width: 100%;
			height: 138rpx;
			button{
				position: absolute;
				bottom: 20rpx;
				left: 24rpx;
				width: 702rpx;
				height: 98rpx;
				font-family: 思源黑体;
				font-size: 36rpx;
				font-weight: 500;
				line-height: 98rpx;
				text-align: center;
				letter-spacing: 0px;
				color: #ECF9F6;
				border-radius: 49rpx;
				background: #35C7A8;
			}
		}
	}
	.content{
		.swiper-item{
			width:750rpx;
			box-sizing: border-box;
			padding: 20rpx 20rpx;
			.scroll-view{
				.card{
					width: 100%;
					height: 310rpx;
					position: relative;
					.cardBox{
						position: absolute;
						bottom: 0;
						// height: 310rpx;
						width: 100%;
						.cardBox-bg{
							// height: 100%;
							width: 100%;
						}
						.cardBox-hg{
							position: absolute;
							top:-50rpx;
							right: 40rpx;
							width: 290rpx;
							height: 270rpx;
						}
						.cardBox-info{
							position: absolute;
							left: 0;
							top: 0;
							height: 100%;
							width: 100%;
							padding-left: 55rpx;
							box-sizing: border-box;
							.nowLevel{
								position: absolute;
								left: 0;
								top: 0;
								border-radius: 20rpx 0 20rpx 0;
								text-align: center;
								background: rgba(156, 156, 156, 0.5);
								width: 136rpx;
								height: 46rpx;
								font-family: PingFang SC;
								font-size: 24rpx;
								font-weight: normal;
								line-height: 46rpx;
								font-variation-settings: "opsz" auto;
								color: #FFFFFF;
							}
							.info-title{
								margin-top: 60rpx;
								font-family: PingFang SC;
								font-size: 60rpx;
								font-weight: normal;
								line-height: 1;
								letter-spacing: 0px;
								font-variation-settings: "opsz" auto;
								color: #240A00;
							}
							.info-price{
								margin-top: 50rpx;
								font-family: PingFang SC;
								font-size: 24rpx;
								font-weight: normal;
								line-height: 1;
								font-variation-settings: "opsz" auto;
								color: #240A00;
								display: flex;
								align-items: flex-end;
								.rmb{
									font-family: PingFang SC;
									font-weight: 400;
									font-size: 24rpx;
									line-height: 20rpx;
									font-variation-settings: "opsz" auto;
									color: #838B9C;
								}
								.price{
									font-family: PingFang SC;
									font-weight: 400;
									font-size: 40rpx;
									line-height: 36rpx;
									font-variation-settings: "opsz" auto;
									color: #838B9C;
								}
							}
						}
						.info-time{
							position: absolute;
							left: 55rpx;
							bottom: 20rpx;
							// margin-top: 30rpx;
							height: 40rpx;
							line-height: 40rpx;
							font-family: PingFang SC;
							font-size: 24rpx;
							font-variation-settings: "opsz" auto;
							color: #240A00;
							.repair{
								margin-left: 15rpx;
								display: inline-block;
								padding:0 14rpx;
								height: 40rpx;
								border-radius: 40rpx;
								background: #FF8686;
								font-family: PingFang SC;
								font-size: 24rpx;
								font-weight: normal;
								line-height: 40rpx;
								font-variation-settings: "opsz" auto;
								color: #FFFFFF;
							}
						}
					}
				}
				.infoCard{
					margin-top: 20rpx;
					width: 100%;
				}
			}
			.btn{
				margin:20rpx  0;
				// width: calc( 100% - 30rpx );
				width: 100%;
				/* #ifdef MP||H5 */
				// width: 306px;
				/* #endif */
				/* #ifdef H5 */
				// width: 306px;
				/* #endif */
				height: 90rpx;
				border-radius: 100px;
				background: var(--ui-BG-5);
				font-family: PingFang SC;
				font-size: 36rpx;
				font-weight: normal;
				line-height: 90rpx;
				letter-spacing: 0em;
				font-variation-settings: "opsz" auto;
				color: #FFFFFF;
			}
		}
	}
</style>